<template>
    <div class="qiamnDaoMian">

        <div class="qianTop">
            <div></div>
            <div class="meetInfo">
                <img src="../assets/qiang/luck.png" alt="留言墙">
                <div> {{ form.signatureName }}</div>
                <div>会议日期：{{ form.signatureStartTime }}</div>
            </div>
            <div>
            </div>
        </div>


        <!-- 列表 开始 -->
        <div class="staList">
            <div class="cashBox">
                <div v-for="(item, index) in cashList" @click="openCash(item)" :key="index" class="cashImg">
                    <div :class="item.isOpen ? 'overClass ' : ''" class="cashCon">
                        <img v-if="!item.isOpen" src="../assets/qiang/cashImg.png" alt="">
                        <template v-else>
                            <img src="../assets/qiang/cashImg2.png" alt="">
                            <div class="moneyTip" v-if="item.isShowNum">{{ item.money }}</div>
                        </template>
                        <div class="numBox" v-if="!item.isOpen">{{ index + 1 }}</div>
                        <div class="numBox numBox1" v-if="item.isOpen">{{ index + 1 }}</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 列表 结束 -->

        <div class="diaBox" v-if="showFlag == 0" @click="closeDia">
            <img src="../assets/qiang/jiangGif3.gif" v-if="showGif" alt="">
            <div :class="selectObj.money == 0 ? 'jiangBox1 jiangBox' : 'jiangBox'" v-else>
                <div class="jiangTip" v-if="selectObj.money != 0">
                    {{ selectObj.money }}元
                </div>
                <div v-else class="guliTip jiangTip">
                    再接再厉
                </div>
                <div class="jiangTip2" v-if="selectObj.money != 0">{{ selectObj.money }}元</div>
            </div>
        </div>

        <img src="../assets/qiang/jiangImg.png" class="jiangBg" alt="">

    </div>
</template>


<script>
export default {
    name: 'jiang',
    data() {
        return {

            cashTotal: 48,

            type1Num: 5,
            type1Money: 500,

            type2Num: 10,
            type2Money: 300,

            type3Num: 20,
            type3Money: 200,

            numList: [],
            cashList: [],
            form: {},
            showFlag: -1,// 1 选中中 0 未选中
            selectObj: '',
            showGif: false,
            systemId: sessionStorage.systemId,
        };
    },
    created() {
        console.log(this.systemId);

        if (localStorage.form != undefined) {
            this.form = JSON.parse(localStorage.form)

        }
        this.getWallData()
    },
    methods: {

        openCash(obj) {
            console.log(obj);

            if (obj.isOpen) {
                return
            }
            if (this.showFlag == 1) {
                return
            }
            this.selectObj = obj
            this.showFlag = 1
            obj.isOpen = true

            setTimeout(() => {
                this.showFlag = 0
                this.showGif = true
            }, 2000);
            setTimeout(() => {
                this.showGif = false
            }, 5000);
            setTimeout(() => {
                obj.isShowNum = true
            }, 7000);
        },
        closeDia() {
            if (!this.showGif && this.selectObj.isShowNum) {
                this.showFlag = -1
            }
        },
        getWallData() {
            this.cashList = []
            for (var i = 0; i < this.cashTotal; i++) {
                this.cashList.push({
                    money: 100,
                    isOpen: false,
                    isShowNum: false
                })
            }
            console.log(this.cashList);
            this.numList = this.generateUniqueRandomNumbers(0, this.cashList.length - 1, this.cashList.length - 1);
            console.log(this.type1Num + this.type2Num + this.type3Num);

            this.numList.forEach((item, index) => {
                if (index < this.type1Num) {
                    this.cashList[item].money = this.type1Money
                } else if (index < this.type1Num + this.type2Num) {
                    this.cashList[item].money = this.type2Money
                } else if (index < this.type1Num + this.type2Num + this.type3Num) {
                    this.cashList[item].money = this.type3Money
                }
            })

            console.log(this.numList);
            console.log(this.cashList);


        },

        generateUniqueRandomNumbers(min, max, count) {
            // 确保min小于max
            if (min > max) [min, max] = [max, min];
            // 计算范围内有多少个不同的整数
            const rangeSize = max - min + 1;
            // 如果需要生成的数字比范围内的还多，则调整count
            if (rangeSize < count) {
                console.warn('所需数字数量超过范围内的不同数字数量，将生成所有可能的数字。');
                count = rangeSize;
            }
            const uniqueNumbers = new Set();
            while (uniqueNumbers.size < count) {
                // 生成一个[min, max]之间的随机整数
                const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
                uniqueNumbers.add(randomNumber);
            }
            // 将Set转换成Array并返回
            return Array.from(uniqueNumbers);
        }

    },
}

</script>
<style lang="less" scoped>
.qiamnDaoMian {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-image: url(../assets/qiang/bottomBg.png);
    background-size: 100% 100%;

    .qianTop {
        box-sizing: border-box;
        padding: 40px 74px;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        // height: 30vh;
        background-image: url(../assets/qiang/topBg.png);
        background-size: 100% 100%;

        img {
            width: 172px;
            height: 74px;
        }

        .meetInfo {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 36px;
            color: #fff;
        }

        .meetInfo>div:nth-child(2) {
            margin: 40px 0;
        }

        .meetInfo>div:nth-child(3) {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 18px;
            color: #999999;
        }

    }

    ::-webkit-scrollbar {
        display: none;
    }

    .staList {
        position: relative;
        box-sizing: border-box;
        padding: 38px 54px;
        box-sizing: border-box;

        width: 100%;
        height: 70vh;
        overflow-y: scroll;
        z-index: 10;
    }
}




.cashBox {
    display: flex;
    align-content: start;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
}

.jiangBg {
    position: fixed;
    top: 38%;
    left: calc(50% - 205px);
    width: 410px;
    height: 370px;
    z-index: 1;
}

.cashImg {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 150px;
    height: 168px;

    perspective: 1000px;
    /* 添加透视效果 */

}

.cashCon {
    position: relative;
    width: 112px;
    height: 146px;
    cursor: pointer;
}

.overClass {
    transition: transform 2s;
    transform-style: preserve-3d;
    transform: rotateY(720deg);

}

.cashCon>img {
    width: 100%;
    height: 100%;
}

.numBox {
    position: absolute;
    bottom: 18px;
    left: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: 2px solid #FAE6CA;
    font-family: FZZongYi-M05S;
    font-weight: 400;
    font-size: 32px;
    color: #FFFFFF;
}

.numBox1 {
    transition: transform 6s;
    transform-style: preserve-3d;
    transform: rotateY(1800deg);
}

.moneyTip {
    position: absolute;
    top: 8px;
    width: 98%;
    text-align: center;
    font-size: 28px;
    color: #f77;
    font-weight: bolde;

}

.diaBox {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, .7);
    z-index: 10;
}

.jiangBox {
    position: relative;
    top: 543px;
    width: 100%;
    height: 100%;
    background-image: url(../assets/qiang/lastImg.png);
    background-size: 100% 100%;
}

.jiangBox1 {
    background-image: url(../assets/qiang/lastimg2.png);
}

.jiangTip {
    position: absolute;
    left: 43%;
    bottom: 21%;
    width: 300px;
    text-align: center;
    font-size: 80px;
    color: #d15858;
    font-weight: bolder;
}

.guliTip {
    bottom: 240px;
    font-size: 48px;
}

.jiangTip2 {
    position: absolute;
    left: 47%;
    bottom: 34%;
    width: 300px;
    text-align: center;
    font-size: 80px;
    color: #F2E9C3;
    font-weight: bolder;
    transform: rotateZ(351deg);
}


.jiangBox {
    animation: scaleAnmite 80s linear infinite;
    -webkit-animation: scaleAnmite 80s linear infinite;
}

@keyframes scaleAnmite {
    0% {
        top: 543px;
    }

    1% {
        top: -300px;
    }

    1.2% {
        top: -280px;
    }

    1.4% {
        top: -300px;
    }

    1.6% {
        top: -280px;
    }

    1.8% {
        top: -300px;
    }

    100% {
        top: -300px;
    }
}
</style>